<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本到视频任务状态</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .status {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
        }
        .pending {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        .running {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        .completed {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .failed {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 15px;
            height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        .video-link {
            display: block;
            margin: 20px 0;
            padding: 15px;
            background-color: #e9f7ef;
            border: 1px solid #d4edda;
            border-radius: 5px;
            text-align: center;
        }
        .video-link a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }
        .video-link a:hover {
            text-decoration: underline;
        }
        .navigation {
            margin-top: 30px;
            text-align: center;
        }
        .nav-link {
            display: inline-block;
            margin: 10px;
            color: #007bff;
            text-decoration: none;
            padding: 10px 20px;
            border: 1px solid #007bff;
            border-radius: 5px;
        }
        .nav-link:hover {
            background-color: #007bff;
            color: white;
        }
        .refresh-btn {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .refresh-btn:hover {
            background-color: #218838;
        }
        .summary {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 15px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文本到视频任务状态</h1>
        
        <div id="status" class="status {{ task.status }}">
            状态: {{ task.message }}
        </div>
        
        {% if task.type == 'excel' %}
        <div class="summary" id="summary" style="display: none;">
            <h3>任务摘要</h3>
            <p id="summary-content"></p>
        </div>
        {% endif %}
        
        {% if task.video_path %}
        <div class="video-link">
            <p>视频已生成完成:</p>
            <a href="{{ url_for('download_file', filename=task.video_path) }}" target="_blank">下载视频文件</a>
        </div>
        {% endif %}
        
        <div class="log">
            <div id="log-content">{{ task.log or '等待日志...' }}</div>
        </div>
        
        <div style="text-align: center; margin: 20px 0;">
            <button class="refresh-btn" onclick="refreshStatus()">刷新状态</button>
        </div>
        
        <div class="navigation">
            <a href="{{ url_for('t2v') }}" class="nav-link">← 返回文本生成视频</a>
            <a href="{{ url_for('index') }}" class="nav-link">← 返回主页</a>
        </div>
    </div>

    <script>
        function refreshStatus() {
            fetch(window.location.href, {
                headers: {
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                // 更新状态
                const statusDiv = document.getElementById('status');
                statusDiv.textContent = '状态: ' + data.message;
                statusDiv.className = 'status ' + data.status;
                
                // 更新日志
                if (data.log) {
                    document.getElementById('log-content').textContent = data.log;
                    
                    // 滚动到底部
                    const logDiv = document.querySelector('.log');
                    logDiv.scrollTop = logDiv.scrollHeight;
                }
                
                // 如果是Excel任务且已完成，显示摘要
                if (data.type === 'excel' && data.status === 'completed' && data.output_data) {
                    const summaryDiv = document.getElementById('summary');
                    const summaryContent = document.getElementById('summary-content');
                    
                    const generatedCount = data.output_data.generated_videos.length;
                    const failedCount = data.output_data.failed_videos.length;
                    
                    let summaryText = `成功生成 ${generatedCount} 个视频`;
                    if (failedCount > 0) {
                        summaryText += `，失败 ${failedCount} 个`;
                    }
                    
                    summaryContent.textContent = summaryText;
                    summaryDiv.style.display = 'block';
                }
                
                // 如果有视频路径，显示下载链接
                if (data.video_path) {
                    let videoLinkDiv = document.querySelector('.video-link');
                    if (!videoLinkDiv) {
                        videoLinkDiv = document.createElement('div');
                        videoLinkDiv.className = 'video-link';
                        videoLinkDiv.innerHTML = '<p>视频已生成完成:</p>';
                        document.querySelector('.container').insertBefore(videoLinkDiv, document.querySelector('.log'));
                    }
                    videoLinkDiv.innerHTML = '<p>视频已生成完成:</p><a href="/download/' + encodeURIComponent(data.video_path) + '" target="_blank">下载视频文件</a>';
                }
                
                // 如果任务已完成或失败，停止自动刷新
                if (data.status === 'completed' || data.status === 'failed') {
                    clearInterval(window.refreshInterval);
                }
            })
            .catch(error => {
                console.error('刷新状态失败:', error);
            });
        }
        
        // 每3秒自动刷新一次状态
        window.refreshInterval = setInterval(refreshStatus, 3000);
        
        // 页面加载完成后滚动日志到底部
        window.addEventListener('load', function() {
            const logDiv = document.querySelector('.log');
            logDiv.scrollTop = logDiv.scrollHeight;
        });
    </script>
</body>
</html>